<template>
  <div>
    <h1>vuex使用</h1>
    <div class="container">

      <div class="left">
        <h1>商品列表页</h1>
        <ul>
          <li v-for="item in shopList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}<button @click="addToCart(item)">添加到购物车</button></li>

        </ul>
      </div>
      <div class="right">
        <h1>购物车列表页vuex获取到的数据</h1>
        <ul>
          <li v-for="item in carList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}</li>
          <!-- <li v-for="item in newcartList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}</li> -->

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data () {
    return {
      shopList: [
        {
          id: 2,
          name: "苹果17",
          price: 9999,
          count: 10,
        }, {
          id: 3,
          name: "OppoK10Pro",
          price: 1349,
          count: 10,
        }, {
          id: 5,
          name: "华为Meta60",
          price: 6899,
          count: 11,
        }, {
          id: 6,
          name: "一加8",
          price: 1999,
          count: 14,
        },
      ]
    }
  },
  computed: {
    ...mapState({
      carList: state => state.studyVuex.carList
    }),
    ...mapGetters('studyVuex', ['newcartList'])
  },
  methods: {
    addToCart (item) {
      console.log("点击了谁", item)
      this.$store.dispatch('studyVuex/addToCart', item)
    }
  },
  created () {

  },
  mounted () {

  },
}
</script>
<style scoped>
.container {
  display: flex;
  background-color: bisque;
}

.left {
  height: 400px;
  border: 1px solid pink;
  flex: 1;

}

.right {
  height: 400px;
  background-color: rgb(173, 201, 189);
  flex: 1;

}
</style>
